﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />    
    <title>Chef FrameWork v0.1</title>
	
    <!-- CSS -->
    <link href="../design/release.true.css" rel="stylesheet" type="text/css" charset="utf-8" />

    <!-- Base Libs -->    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>      
</head>
<body>
<div  class="container_12">

    <div class="grid_12">
        <h1 class="left">Chef FrameWork &trade;</h1>
        <h3>Css, Html, Events, &amp; Functions</h3>
    </div>

    <div class="clear"></div>                        
    <div class="grid_6"> 
        <div id="content" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
            <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
                <span id="ui-dialog-title-dialog" class="ui-dialog-title">

                chef.Templates()
      
                </span>
                <a class="ui-dialog-titlebar-close ui-corner-all" href="#" onclick="$('#content').hide();"><span class="ui-icon ui-icon-closethick">close</span></a>
            </div>
            <div class="ui-dialog-content ui-widget-content -hide">

                <!-- HTML: Template -->
                <div id="template">
                    <div class="vcard">
                        <!-- hCard -->           
                        <span class="fn nickname">Jules</span>,
                        <span class="age">43</span>,
                        <span class="sex" onclick="alert('i should stay here');">Male</span>
                        <div class="clear"></div>
                        <span class="adr">
                            <span class="country-name">France</span>,
                        </span>
                        <span class="email">Jules@Chef-FrameWork.NET</span>
                    </div>
                </div>  
                <!-- HTML: Template -->
            </div>
            <span class="left">&spades; <a href="#" onclick="window.open('http://hcard.geekhood.net/?url=' + escape(window.location));">Validate hCard</a></span> <span class="right"><a href="#" id="render">Render Template</a> &spades;</span>
        </div>        
    </div>
    
    <div class="grid_3 push_5"> 
        <ul>
            <li><a href="#" onclick="$('#content').show();">Show Container</a></li>
            <li><a href="#" onclick="$.loadThemeRoller()">Change Skin</a> <small>(2)</small></li>
            <li><a href="#" onclick="$.loadXedit()">Load Interaction Editor</a> <small>(2,4) (3)</small></li>            
        </ul>
    </div>  
    
    <div class="clear"></div>
    <div class="grid_3 push_5"> 
        <img src="../design/images/flow.gif" />
    </div> 

    <div class="clear"></div>
    <div class="grid_3 required">
        Requires:
        <ul>
            <li>Firefox <small>(2)</small></li>
            <li>Google Gears <small>(3)</small></li>
            <li>Google Chrome <small>(4)</small></li>            
       </ul>       
    </div>
    
 
    <div class="clear"></div>                     
    <div class="grid_7 push_3"> 
        <a title="Cloud Storage" href="http://www.microsoft.com/windowsazure/" target="_blank"><img src="../design/images/azure.jpg" height="76" /></a>
        <a title="Source Code" href="http://chef.codeplex.com" target="_blank"><img src="../design/images/codeplex.jpg" height="76" /></a>
    </div>

    <div class="clear"></div>
    <div class="grid_4 push_4"> 
        <code>&copy; 2010 <a href="http://www.i-technology.net" target="_blank">I-Technology.NET</a></code>
    </div> 
</div>

    <!-- Extra: Libs -->
    <script src="../design/release.false.js" type="text/javascript" charset="utf-8"></script>

    <!-- Application -->
    <script type="text/javascript">
        $(document).ready(function () {
            var content = $("#content");
            content.find('span#ui-dialog-title-dialog').bind('click', function (event, ui) {
                content.find('div.ui-dialog-content').toggle(500);
            });
            content.draggable().find('div.ui-dialog-content').show(1500);

            // Events
            $("#render").click(function () { renderTemplate(); });
        });

        // Functions
        function renderTemplate() {
            var filter = function (data, template) {
                if (data.age == 65)
                    template.country_name.addClass("country_name-1");

                if (data.sex == "Male") {
                    // some tests to see if bindings are working right
                    template.sex.css({ "text-decoration": "underline", "cursor":"pointer" });
                    template.sex.click(function () { alert(data.nickname.concat(" is ", data.age, " years old.")); });
                }

                return template;
            };

            // Data
            $.jsonP("../data/jsonp.js", function (data) {
                $("#template").renderTemplate(data, filter);
            });            
        }
    </script>

    <!-- Google was here -->
    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        try {
            var pageTracker = _gat._getTracker("UA-15567888-3");
            pageTracker._trackPageview();
        } catch (err) { }
    </script>
</body>
</html>
